<script lang="ts" setup>
import { injectState } from "../state";

defineOptions({ name: "Filters" });

const {
	filter,
	page: { isLoading },
} = injectState()!;

const initial = { ...toRaw(filter.value) };
const data = ref({ ...initial });

const search = () => {
	filter.value = { ...toRaw(data.value) };
};

const reset = () => {
	data.value = { ...initial };
};

const location = ref({
	longitude: "",
	latitude: "",
});
</script>

<template>
	<el-form class="filter-form" inline :model="data" :disabled="isLoading">
		<!-- <el-form-item label="企业名称">
			<el-select w="240px!" />
		</el-form-item> -->
		<!-- <el-form-item label="地点">
			<el-input
				v-model="location.longitude"
				clearable
				placeholder="请输入经度"
				style="width: 50%"
			/>
			<el-input
				v-model="location.latitude"
				clearable
				placeholder="请输入纬度"
				style="width: 50%"
			/>
		</el-form-item> -->
		<el-form-item label="时间" prop="时间">
			<el-date-picker
				v-model="data.checkTimeStart"
				clearable
				type="date"
				class="w-240px!"
				placeholder="开始日期"
				value-format="YYYY-MM-DD HH:mm:ss"
				format="YYYY-MM-DD HH:mm:ss"
			/>
		</el-form-item>
		<el-form-item label="—" prop="—">
			<el-date-picker
				v-model="data.checkTimeEnd"
				clearable
				type="date"
				class="w-240px!"
				placeholder="结束日期"
				value-format="YYYY-MM-DD HH:mm:ss"
				format="YYYY-MM-DD HH:mm:ss"
			/>
		</el-form-item>
		<!-- <el-form-item>
      <el-input placeholder="搜索" class="w-240px!">
        <template #prefix>
          <el-icon class="i-custom:search" />
        </template>
      </el-input>
    </el-form-item> -->
		<el-form-item>
			<el-divider direction="vertical" h="32px!" m="r-22px!" />
			<el-button type="primary" :loading="isLoading" @click="search">
				<template #icon>
					<el-icon class="i-custom:search" />
				</template>
				查询
			</el-button>
			<el-button @click="reset">
				<template #icon>
					<el-icon class="i-custom:reset" />
				</template>
				重置
			</el-button>
		</el-form-item>
	</el-form>
</template>
